<template>
  <div>
    <ZgNewPage
      ref="page"
      title="待办列表"
      :conditions="conditions"
      @condition="onSearch"
      :openCondition="true"
      :pageOpt="pageOpt"
      :dataBtns="dataBtns"
      :adminWidth="140"
      :labelCol="7"
      :headers="backHeaders"
      @header="mergeHeader"
      @search="onSearch"
      @admin="btnClick"
    >
      <template slot="columns">
        <a-table-column
          v-for="(h, i) in headers"
          :key="`column${i}`"
          :width="h.width === 0 ? 'auto' : h.width"
          :title="h.label"
        >
          <template slot-scope="record">
            {{ record[h.code] }}
          </template>
        </a-table-column>
      </template>
    </ZgNewPage>
    <ZgDrawer ref="zgDrawer" width="100%" v-model="visible">
      <HandleIndex @close="onClose" :flowInfo="flowInfo" ref="HandleIndex"></HandleIndex>
    </ZgDrawer>
  </div>
</template>

<script>
import HandleIndex from '@/views/autoflow/handle/Index'
import { pageMixin } from '@/core/page-mixin'

export default {
  mixins: [pageMixin],
  components: {
    HandleIndex
  },
  data () {
    return {
      pageCode: 'flowHandle-todoList',
      flowInfo: null,
      visible: false,
      backHeaders: [],
      pageOpt: {
        showConditionBtn: false,
        showHeaderConfig: true
      },
      headers: [
        { code: 'FLOWNAME', label: '流程名称', width: 240, isShow: true, sort: 0 },
        { code: 'FLOWCODE', label: '流程Code', width: 240, isShow: true, sort: 0 },
        { code: 'INSTANCENO', label: '流程编码', width: 240, isShow: true, sort: 0 }
      ],
      conditions: [
        { code: 'flowName', compType: '单行文本', label: '流程名称', defaultVal: '' },
        { code: 'instanceNo', compType: '单行文本', label: '流程编码', defaultVal: '' },
        // { code: 'stepName', compType: '单行文本', label: '环节名称', defaultVal: '' },
        {
          code: 'state',
          compType: '下拉选择',
          label: '流程状态',
          defaultVal: '0',
          extra: {
            下拉选项: [
              { value: '0', label: '待处理' },
              { value: '1', label: '进行中' },
              { value: '2', label: '已办结' }
            ]
          }
        }
      ],
      dataBtns: [
        {
          key: 1,
          name: '去处理',
          code: '',
          type: 'primary',
          icon: 'fa-plane',
          isShow: () => {
            return true
          }
        }
      ]
    }
  },
  created () {
    this.getHeaderList()
  },
  methods: {
    getHeaderList () {
      this.$http.caget('/api/swan-cloud-settle-its/InherentFields/getInherentConfList', {}, (res) => {
        if (res.conditions.length > 0) {
          res.conditions.map((v) => {
            this.conditions.push({
              code: v.fieldCode,
              compType: v.fieldType,
              label: v.label,
              defaultVal: ''
            })
          })
        }
        if (res.heads.length > 0) {
          res.heads.map((v) => {
            this.headers.push({
              code: v.fieldCode,
              label: v.label,
              isShow: true,
              sort: 0
            })
          })
        }
        this.backHeaders = JSON.parse(JSON.stringify(this.headers))
      })
    },
    mergeHeader (newHeaders) {
      if (!newHeaders) {
        return
      }
      this.headers = newHeaders
        .filter((t) => {
          return t.isShow
        })
        .sort((a, b) => {
          return a.sort - b.sort
        })
    },
    onSearch (param) {
      // 读取用户个性化表头数据
      const diyHeaderKey = this.currentUser.username + '_diyHeader_' + this.formCode
      const diyHeaders = localStorage.getItem(diyHeaderKey)
      if (diyHeaders) {
        this.mergeHeader(JSON.parse(diyHeaders))
      }
      if (param.flowInstState !== undefined && param.flowInstState !== '' && param.flowInstState !== '0') {
        this.dataBtns = []
      } else {
        this.dataBtns = [
          {
            key: 1,
            name: '去处理',
            code: '',
            type: 'primary',
            icon: 'fa-plane',
            isShow: () => {
              return true
            }
          }
        ]
      }
      // 加载表头
      param.userId = 390
      param.paramJson = JSON.stringify(param)
      this.$http.capost('/api/swan-cloud-settle-its/InherentFields/getUniteData ', param, (res) => {
        console.log(res)
        this.$refs.page.endSearch({
          total: Number(res.total),
          list: res.records
        })

        // 填充场景数据
        this.SET_CONTEXT({
          flag: this.pageCode,
          // 数据列表
          dataList: res.records.map((t, i) => {
            return {
              index: i + 1,
              id: t.id
            }
          }),
          // 筛选条件
          condition: this.setCondition(this.conditions),
          // 按钮操作
          operate: this.operatesArr({ dataBtns: this.dataBtns }),
          // 视图字段
          form: []
        })
      })
    },
    btnClick (val) {
      console.log(val, '898989')
      if (val.key === 1) {
        this.$set(this, 'flowInfo', {
          instCode: val.obj.instCode,
          stepInstCode: val.obj.stepInstCode
        })
        console.log(this.flowInfo)
        this.$refs.zgDrawer.open()
      }
    },
    onClose () {
      this.visible = false
    }
  },
  mounted () {
    this.$eventBus.$off('order')
    this.$eventBus.$on('order', (msg) => {
      if (msg.flag === this.pageCode) {
        if (msg.order === 'dataList') {
          this.$refs.page.setPageIds(
            msg.dataList.map((x) => {
              return x.id
            })
          )
        }
      }
    })
  }
}
</script>

<style scoped>
</style>
